<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Saltybe
        </q-toolbar-title>

        <q-btn flat>
          <q-avatar class="q-mr-sm" v-if="username">
            <img :src="'statics/img/avatar.jpg'"/>
          </q-avatar>
          <div class="text-caption" v-if="username">{{ username }}</div>
          <div class="text-caption" v-else>Log in</div>
          <q-menu v-if="username">
            <q-list style="min-width: 150px">
              <q-item clickable v-close-popup @click="$router.push('/account/upload')">
                <q-item-section side>
                  <q-icon name="add" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Upload</q-item-label>
                </q-item-section>
              </q-item>
              <q-separator/>
              <q-item clickable v-close-popup @click="onLogoutEvent">
                <q-item-section side>
                  <q-icon name="logout" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Logout</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
          <q-menu v-else>
            <q-list style="min-width: 150px">
              <q-item clickable v-close-popup @click="$router.push('/account/login')">
                <q-item-section side>
                  <q-icon name="login" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Login</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="$router.push('/account/register')">
                <q-item-section side>
                  <q-icon name="account_circle" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Register</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      bordered
      content-class="bg-grey-1">
      <q-list>
        <q-item-label
          header
          class="text-grey-8">
          Navigation
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'src/components/EssentialLink'
import {Account} from 'src/lib/Account'

export default {
  name: 'MainLayout',

  components: {
    EssentialLink
  },

  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: [
        {
          title: 'Home',
          caption: 'Index of saltybe',
          icon: 'home',
          link: '/'
        },
        {
          title: 'Find',
          caption: 'Find something of the world',
          icon: 'search',
          link: '/find'
        },
        {
          title: 'Account',
          caption: 'About yourself',
          icon: 'account_circle',
          link: '/account'
        }
      ]
    }
  },
  computed: {
    username: {
      get () {
        return this.$store.state.user.username;
      }
    }
  },
  methods: {
    onLogoutEvent () {
      Account.logout(this.$store);
    }
  }
}
</script>
